export class CanvasButton {
  constructor(params) {
    // 创建画布元素
    this.buttonCanvas = wx.createCanvas();
    this.context = this.buttonCanvas.getContext('2d');

    this.params = params;
    this.success = params.success || function () { };
    this.fail = params.fail || function () { };

    this.style = {
      left: this.params.style.left || 0,
      top: this.params.style.top || 0,
      width: this.params.style.width || this.image.width || 100,
      height: this.params.style.height || this.image.height || 40,
      borderWidth: this.params.style.borderWidth || '',
      lineHeight: this.params.style.lineHeight || '',
      backgroundColor: this.params.style.backgroundColor || 'transparent',
      textAlign: this.params.style.textAlign || 'center',
      fontSize: this.params.style.fontSize || '20px',
      borderRadius: this.params.style.borderRadius || '',
      borderColor: this.params.style.borderColor || 'transparent',
      textColor: this.params.style.textColor || 'black',
      fontFamily: this.params.style.fontFamily || 'Arial',
      fontStyle: this.params.style.fontStyle || 'normal',
      textDecoration: this.params.style.textDecoration || 'none',
      shadowColor: this.params.style.shadowColor || 'transparent',
      shadowBlur: this.params.style.shadowBlur || 0,
      shadowOffsetX: this.params.style.shadowOffsetX || 0,
      shadowOffsetY: this.params.style.shadowOffsetY || 0,
      textDecorationLine: this.params.style.textDecorationLine || 'none'
    };

    this.buttonCanvas.width = this.style.width;
    this.buttonCanvas.height = this.style.height;

    this.isHide = false;
    this.isDestroy = false;

    this.touchStartHandler = (event) => this.onTouchStart(event);
    this.touchEndHandler = (event) => this.onTouchEnd(event);

    this.dealButtonInfo();
  }

  dealButtonInfo() {
    const type = this.params.type;
    if (type === 'text') {
      this.text = this.params.text;
      this.drawTextButton();
    } else if (type === 'image') {
      this.image = wx.createImage();
      this.image.src = this.params.image;
      this.image.onload = () => this.drawImageButton();
    }
  }

  drawImageButton() {
    try {
      if (this.style.backgroundColor !== 'transparent') {
        this.context.fillStyle = this.style.backgroundColor;
        this.context.fillRect(0, 0, this.style.width, this.style.height);
      }
      // 绘制图片
      this.context.drawImage(this.image, 0, 0, this.style.width, this.style.height);
      // 渲染图片
      this.buttonImage = wx.createImage();
      this.buttonImage.src = this.buttonCanvas.toDataURL();

      // 监听
      wx.onTouchStart(this.touchStartHandler);
      wx.onTouchEnd(this.touchEndHandler);

      this.success(this);
    } catch (error) {
      console.log("创建按钮失败", error);
      this.fail({ errMsg: error.message });
    }
  }

  drawTextButton() {
    try {
      // 绘制圆角矩形的路径
      this.roundedRect(0, 0, this.style.width, this.style.height, this.style.borderRadius);

      // 绘制按钮的背景
      this.context.fillStyle = this.style.backgroundColor || '#transparent'; // 确保有默认颜色
      this.context.fill();

      // 绘制按钮的边框
      if (this.style.borderColor && this.style.borderWidth) {
        this.context.strokeStyle = this.style.borderColor;
        this.context.lineWidth = this.style.borderWidth;
        this.context.stroke();
      }
      // 设置文本样式
      this.context.font = `${this.style.fontStyle} ${this.style.fontSize} ${this.style.fontFamily}`;
      this.context.fillStyle = this.style.textColor;
      this.context.textAlign = this.style.textAlign;
      this.context.textBaseline = 'middle';

      // 计算文本的位置
      const textX = this.style.width / 2;
      const textY = this.style.height / 2;

      // 绘制按钮上的文本
      this.context.fillStyle = this.style.textColor;
      this.context.font = `${this.style.fontSize}px ${this.style.fontFamily}`;
      this.context.textAlign = this.style.textAlign;
      this.context.fillText(this.text, textX, textY);

      // 绘制文本下划线
      if (this.style.textDecorationLine === 'underline') {
        const textWidth = this.context.measureText(this.text).width;
        this.context.beginPath();
        this.context.strokeStyle = this.style.textColor;
        this.context.lineWidth = 1;
        this.context.moveTo(textX - textWidth / 2, textY + this.style.fontSize / 2);
        this.context.lineTo(textX + textWidth / 2, textY + this.style.fontSize / 2);
        this.context.stroke();
      }

      // 渲染图片
      this.buttonImage = wx.createImage();
      this.buttonImage.src = this.buttonCanvas.toDataURL();

      // 监听
      wx.onTouchStart(this.touchStartHandler);
      wx.onTouchEnd(this.touchEndHandler);

      this.success(this);
    } catch (error) {
      console.log("创建按钮失败", error);
      this.fail({ errMsg: error.message });
    }
  }
  // 绘制圆角
  roundedRect(x, y, width, height, borderRadius) {
    this.context.beginPath();
    this.context.moveTo(x + borderRadius, y);
    this.context.lineTo(x + width - borderRadius, y);
    this.context.arcTo(x + width, y, x + width, y + borderRadius, borderRadius);
    this.context.lineTo(x + width, y + height - borderRadius);
    this.context.arcTo(x + width, y + height, x + width - borderRadius, y + height, borderRadius);
    this.context.lineTo(x + borderRadius, y + height);
    this.context.arcTo(x, y + height, x, y + height - borderRadius, borderRadius);
    this.context.lineTo(x, y + borderRadius);
    this.context.arcTo(x, y, x + borderRadius, y, borderRadius);
  }

  onTouchStart(event) {
    const { clientX, clientY } = event.touches[0];
    if (this.isInside(clientX, clientY)) {
    }
  }

  onTouchEnd(event) {
    const { clientX, clientY } = event.changedTouches[0];
    if (this.isInside(clientX, clientY)) {
      if (this.clickCallback) {
        this.clickCallback();
      }
    }
  }

  drawButton(ctx) {
    this.drawCtx = ctx;
    if (this.buttonImage) {
      this.buttonImage.onload = () => {
        this.draw();
      };
    } else {
      console.error('Button image is not loaded yet.');
    }
  }

  draw() {
    if (!this.isHide && !this.isDestroy) {
      this.drawCtx.drawImage(this.buttonImage, this.style.left, this.style.top, this.buttonCanvas.width, this.buttonCanvas.height);
    }
    requestAnimationFrame(() => this.draw());
  }

  onTap(callback) {
    this.clickCallback = callback;
  }

  hideButton() {
    wx.offTouchStart(this.touchStartHandler);
    wx.offTouchEnd(this.touchEndHandler);
    this.isHide = true;
  }

  showButton() {
    wx.onTouchStart(this.touchStartHandler);
    wx.onTouchEnd(this.touchEndHandler);
    this.isHide = false;
  }

  destroy() {
    wx.offTouchStart(this.touchStartHandler);
    wx.offTouchEnd(this.touchEndHandler);
    this.buttonCanvas = null;
    this.context = null;
    this.image = null;
    this.buttonImage = null;
    this.onClickCallback = null;
    this.touchStartHandler = null;
    this.touchEndHandler = null;
    this.drawCallback = null;
    this.clickCallback = null;
    this.isDestroy = true;
  }

  isInside(x, y) {
    return x >= this.style.left && x <= this.style.left + this.style.width && y >= this.style.top && y <= this.style.top + this.style.height;
  }


}
